<template>
  <div id="warntrend">
    <div v-for="(item, index) in TrendData" :key="index" class="righttop">
      <div class="numleft">
        <div class="number">
          <p class="num">{{ item.number }}</p>
        </div>
        <p v-if="item.name == ''">
          <img src="../img/hard_blue.png" alt="" />
          <span>-{{ item.value }}%</span>
        </p>
        <p>{{ item.name }}</p>
      </div>
      <div class="rightresult">
        <div v-if="item.name == '昆明告警数'">
          <p class="result">
            开市执行结果：<span class="success">{{ item.result }}</span>
          </p>
        </div>
        <div v-else>
        <p class="open">开市执行结果：<span class="success">{{item.result}}</span></p>
        <p class="close">闭市执行结果：<span class="success">{{item.result}}</span></p>
      </div>
      </div>
    </div>

    <!-- <div v-for="(item, index) in TrendData" :key="index" class="rightbottom">
      <div class="numleft">
        <div class="number">
          <p class="num">{{item.number}}</p>
        </div>
        <p>上海告警数</p>
      </div>
      <div class="rightresult">
        <p class="open">开市执行结果：<span class="success">{{item.result}}</span></p>
        <p class="close">闭市执行结果：<span class="success">执行成功</span></p>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  name: "WarnTrend",
  props: ["TrendData"],
};
</script>
<style lang="less" scoped>
.right {
  width: 400px;
  height: 328px;
  margin-left: 25px;
}
.righttop {
  width: 400px;
  height: 155px;
  margin-top: 10px;
  position: relative;
}
// .rightbottom {
//   width: 400px;
//   height: 149px;
//   margin-top: 25px;
//   position: relative;
// }
.number {
  width: 70px;
  height: 70px;
  background-image: url(../images/number.png);
  background-size: 100% 100%;
  position: absolute;
  top: 24px;
  left: 54px;
}
.number:after {
  content: "";
  position: absolute;
  background: #0c81df;
  width: 1.5px;
  height: 50px;
  left: 85px;
  top: 10px;
}
p {
  position: absolute;
  top: 95px;
  left: 48px;
  font-size: 18px;
  color: #a4d6ff;
}
.numleft {
  width: 150px;
  height: 148px;
}
.num {
  position: absolute;
  top: 6px;
  left: 18px;
  color: #4df453;
}
.rightresult {
  width: 235px;
  height: 80px;
  position: absolute;
  top: 18px;
  left: 155px;
}
.result {
  position: absolute;
  top: 12px;
  left: 13px;
  font-size: 18px;
}
.success {
  color: #4df453;
  font-size: 18px;
}
.open {
  position: absolute;
  top: -12px;
  left: 13px;
}
.close {
  position: absolute;
  top: 29px;
  left: 13px;
}
</style>
